<template>
  <div :id="id" :style="style"></div>
</template>

<script>
export default {
  name: 'charts',
  data () {
    return {
      chart: ''
    }
  },
  props: {
  	id: {
  	  	type: String
  	},
    title:String,
    subtitle:String,
    seriesName:String,
  	width: {
  		type: String,
  		default: '100%'
  	},
  	height: {
  		type: String,
  		default: '100%'
  	},
    legendData:Array,
    selected:Array,
    seriesData:Array
  },
  computed: {
  	style() {
  		return {
  			width: this.width,
  			height: this.height
  		}
  	}
  },
  watch: {
    seriesData(){
      this.init()
    }
  },
  mounted() {
  	this.init()
  },
  methods: {
  	init() {
  		this.chart = this.$echarts.init(document.getElementById(this.id))
      const option={
        title: {
	              text: '同名数量统计',
                subtext: '纯属虚构',
                x:'center'
	            },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            type: 'scroll',
            orient: 'vertical',
            right: 10,
            top: 20,
            bottom: 20,
            data: this.legendData,
            // selected: this.selected
        },
        series : [
            {
                name: '姓名',
                type: 'pie',
                radius : '55%',
                center: ['40%', '50%'],
                data: this.seriesData,
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ],
      }
      this.chart.setOption(option)
  		window.addEventListener("resize", this.chart.resize);
  	}
  }
}
</script>
<style scoped>
</style>